<template>
  <div>
    <!-- 表格内容 -->
    <el-table :data="pageInfo.list" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <!-- <el-table-column prop="address" label="预约数最多小区" width="180">
      </el-table-column> -->
      <el-table-column prop="number1" label="上门数量" width="140">
      </el-table-column>
      <el-table-column prop="number0" label="定点数量" width="140">
      </el-table-column>
      <el-table-column prop="sumnumber" label="总数量" width="140">
      </el-table-column>
      <el-table-column  label="预约结果" width="140">
        <template slot-scope="scope">
            <span v-if="scope.row.reservation == 1">预约成功</span>
            <span v-else-if="scope.row.reservation == 2">预约失败(社区预约总人数较少)</span>
            <span v-else>正在预约中</span>
          </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- <el-button size="mini" @click="findDetails(scope.$index, scope.row)">查看详情</el-button> -->
          <el-button size="mini" @click="Edit">编辑短信内容</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 查看详情隐藏的界面 -->
    <!-- <div>
      <el-dialog title="详细内容" :visible.sync="detailsFormVisible">
        <el-table :data="tableData" style="width: 100%;line-height: 20px;">
          <el-table-column prop="date" label="日期" width="160">
          </el-table-column> -->
          <!-- <el-table-column prop="address" label="小区" width="140">
          </el-table-column> -->
          <!-- <el-table-column prop="type1_number" label="上门数量" width="140">
          </el-table-column>
          <el-table-column prop="type0_number" label="定点数量" width="140">
          </el-table-column>
          <el-table-column prop="number" label="总数量" width="140">
          </el-table-column>
          <el-table-column prop="number" label="预约结果" width="140">
          </el-table-column>
        </el-table>
      </el-dialog>
    </div> -->
    <!-- 发送短信隐藏的界面 -->
    <div>
      <el-dialog title="群发短信" :visible.sync="sendVisible">
        <div class="hello">
          <el-form :model="submitfrom">
            <el-form-item  label-width="50px">
            <el-radio-group v-model="submitfrom.templateId">
              <el-radio label="1618600" @change="flag=false">预约成功</el-radio>
              <el-radio label="1618603" @change="flag=true">预约失败</el-radio>
            </el-radio-group><br>
            </el-form-item>
            <el-input v-model="submitfrom.nr" placeholder="请输入内容" :disabled="flag"></el-input>
          </el-form>
        </div>
        <el-button size="mini" @click="sendMSG">发送短信</el-button>
        <el-button size="mini" @click="sendVisible = false;submitfrom={};">取消</el-button>
      </el-dialog>
    </div>
    <!-- 分页功能 -->
    <div class="block">
    	<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
    		:current-page="currentPage" :page-sizes="[2,3,4]" :page-size="pageSize"
    		layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
    	</el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //是否能驶入信息
        flag:true,
        submitfrom:{
          templateId:'',
          nr:''
        },
        // //预约结果
        // templateId: '',
        // //短信内容
        // nr:[],
        //当前页码
        currentPage: 1,
        //每页显示的条数
        pageSize: 3,
        pageInfo: {},

        //查看详情页面
        // detailsFormVisible: false,
        //发送短信页面
        sendVisible: false,
        //小区汇总数据
        tableSumData: [{
          date: '',
          reservation: NaN,
          number0: NaN,
          number1: NaN,
          sumnumber: NaN
        }],
        //各个小区全部信息
        // tableData: [{
        //   date: '2016-05-02',
        //   address: 'A区',
        //   type0_number: 100,
        //   type1_number: 100,
        //   number: 150
        // }, {
        //   date: '2016-05-04',
        //   address: 'B区',
        //   type0_number: 100,
        //   type1_number: 100,
        //   number: 200
        // }, {
        //   date: '2016-05-01',
        //   address: 'C区',
        //   type0_number: 100,
        //   type1_number: 100,
        //   number: 300
        // }, {
        //   date: '2016-05-03',
        //   address: 'D区',
        //   type0_number: 100,
        //   type1_number: 100,
        //   number: 400
        // }]
      }
    },
    //方法区
    methods: {
      //查看详情
      findDetails(index, row) {
        this.detailsFormVisible = true;
        console.log(index, row);
      },
      //编辑短信
      Edit() {
        this.sendVisible = true;
      },
      //发送短信
      sendMSG() {
        let message=[this.submitfrom.nr]
        //查所有预约的账户的点电话号码
        // this.$axios.get("http://localhost:8080/epidemic/findPhone").then(res=>{
        //   console.log(res.data.data);
        //   var arr=res.data.data;
        //   for(var i in arr){
        //     console.log(arr[i])
        //     this.$sms(arr[i], message,this.templateId) // 电话号码，内容
        //   }
        // })
        //发送ajax，设置预约结果
        let reservation=0;
        if(this.flag){
          reservation=2
        }else{
          reservation=1
        }
        this.$axios.get("http://localhost:8080/epidemic/updateReservation",{params:{reservation:reservation}}).then(res=>{
          this.getEpidemicList();
        })
      },
      findDetails(index, row) {
      	console.log(index, row);
        this.detailsFormVisible=true;
        this.$axios.get("http://localhost:8080/epidemic"+ "/" + row.id).then(res=>{
          console.log(res.data);
          this.detailsform = {...res.data};
        })
      },
      handleDelete(index, row) {
      	console.log(index, row);
      	this.$confirm('此操作撤回该申请, 是否继续?', '提示', {
      		confirmButtonText: '确定',
      		cancelButtonText: '取消',
      		type: 'warning'
      	}).then(() => {
      		//发送ajax
      		this.$axios.delete("http://localhost:8080/epidemic/" +row.id).then(res => {
            console.log(res.data.code);
      			if (res.data.code == 200) {
              console.log(res.data);
      				this.$message({
      					type: 'success',
      					message: res.data.msg
      				});
      			}else{
      				this.$message({
      					type: 'error',
      					message: res.data.msg
      				});
      			}
      			this.getEpidemicList();
      		})
      	}).catch(() => {
      		this.$message({
      			type: 'info',
      			message: '已取消撤回'
      		});
      	});
      },
      tableRowClassName({
      	row,
      	rowIndex
      }) {
      	if (rowIndex === 1) {
      		return 'warning-row';
      	} else if (rowIndex === 3) {
      		return 'success-row';
      	}
      	return '';
      },
      handleSizeChange(val) {
      	console.log(`每页 ${val} 条`);
      	this.pageSize = val;
      	this.getEpidemicList();
      },
      handleCurrentChange(val) {
      	console.log(`当前页: ${val}`);
      	this.currentPage = val;
      	this.getEpidemicList();
      },
      //获取数据库数据方法
      getEpidemicList(){
      	this.$axios.get("http://localhost:8080/epidemic/findSumDataByPage",{params:{currentPage:this.currentPage,pageSize:this.pageSize}}).then(res=>{
          console.log(res.data);
          this.pageInfo = res.data.data;
        })
      },
    },

    //勾子函数，用来查询
    created() {
      this.getEpidemicList()
    }
  }
</script>

<style>
  .el-table__header-wrapper {
    line-height: 20px;
  }

  .el-dialog__header {
    line-height: 20px;
  }

  .el-dialog__body {
    line-height: 20px;
  }
</style>
